<template>
  <div class="security-container">
    <!-- 添加加载状态显示 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    
    <div v-else class="security-grid">
      <!-- 左侧安防设备状态 -->
      <div class="status-panel">
        <h3 class="cyber-title">设备状态监控</h3>
        <div class="device-stats">
          <div class="stat-card" v-for="(stat, index) in deviceStats" :key="index">
            <div class="stat-icon">
              <el-icon :component="stat.icon" />
            </div>
            <div class="stat-info">
              <div class="stat-name">{{ stat.name }}</div>
              <div class="stat-value">
                <span class="online">{{ stat.online }}</span>/{{ stat.total }}
              </div>
            </div>
            <div class="stat-status" :class="stat.status">
              {{ stat.statusText }}
            </div>
          </div>
        </div>
      </div>

      <!-- 中间实时监控 -->
      <div class="monitor-panel">
        <h3 class="cyber-title">实时监控</h3>
        <div class="camera-grid">
          <div class="camera-view" v-for="camera in activeMonitors" :key="camera.id">
            <div class="camera-header">
              <span class="camera-name">{{ camera.name }}</span>
              <span class="camera-status" :class="camera.status">● {{ camera.statusText }}</span>
            </div>
            <div class="video-feed">
              <div class="scan-line"></div>
              <div class="camera-info">
                <span>{{ camera.location }}</span>
                <span>{{ camera.currentTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧告警面板 -->
      <div class="alert-panel">
        <div class="alert-header">
          <h3 class="cyber-title">告警信息</h3>
          <!-- 分页器移到标题右侧 -->
          <div v-if="totalPages > 1" class="cyber-pagination">
            <button 
              class="cyber-btn prev" 
              :class="{ disabled: currentPage === 1 }"
              @click="handlePageChange(currentPage - 1)"
            >
              <span class="btn-content">◀</span>
            </button>
            <div class="page-numbers">
              <button 
                v-for="page in displayedPages" 
                :key="page"
                class="cyber-btn page-number"
                :class="{ active: currentPage === page }"
                @click="handlePageChange(page)"
              >
                <span class="btn-content">{{ page }}</span>
              </button>
            </div>
            <button 
              class="cyber-btn next"
              :class="{ disabled: currentPage === totalPages }"
              @click="handlePageChange(currentPage + 1)"
            >
              <span class="btn-content">▶</span>
            </button>
          </div>
        </div>
        <div class="alert-content">
          <div class="alert-list">
            <div v-for="(alert, index) in currentPageAlerts" 
                 :key="index" 
                 class="alert-item"
                 :class="alert.level">
              <el-icon :component="alert.icon" class="alert-icon" />
              <div class="alert-content">
                <div class="alert-header">
                  <span class="alert-time">{{ alert.time }}</span>
                  <span class="alert-level">{{ alert.levelText }}</span>
                </div>
                <div class="alert-message">{{ alert.message }}</div>
                <div class="alert-location">{{ alert.location }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { 
  VideoCamera, 
  Lock, 
  Warning, 
  Odometer,
  Bell
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { asyncRoutes } from '@/router/index.js'
import { useRoute, useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
// 根据权限过滤可访问路由
const accessibleRoutes = computed(() => {
  return asyncRoutes.filter(route => 
    !route.meta.hidden && hasPermission(userStore.roles, route)
  )
})
// 标签切换方法
const switchTab = (tab) => {
  router.push(tab.path)
}

// 判断当前激活标签
const isActiveTab = (path) => {
  return route.path.startsWith(path)
}

// 设备状态数据
const deviceStats = ref([
  { name: '摄像头', icon: VideoCamera, online: 42, total: 48, status: 'normal', statusText: '运行正常' },
  { name: '门禁', icon: Lock, online: 28, total: 30, status: 'normal', statusText: '运行正常' },
  { name: '消防设备', icon: Warning, online: 35, total: 36, status: 'warning', statusText: '注意检查' },
  { name: '电梯', icon: Odometer, online: 8, total: 8, status: 'normal', statusText: '运行正常' },
])

// 监控摄像头数据
const activeMonitors = ref([
  { id: 1, name: '大门监控 01', status: 'online', statusText: '在线', location: '正门入口' },
  { id: 2, name: '电梯监控 A3', status: 'online', statusText: '在线', location: 'A座电梯' },
  { id: 3, name: '消防通道 B2', status: 'warning', statusText: '注意', location: 'B座消防通道' },
  { id: 4, name: '停车场 P1', status: 'online', statusText: '在线', location: '地下停车场' },
])

// 分页相关
const currentPage = ref(1)
const pageSize = 5

// 扩展告警数据
const alerts = ref([
  {
    time: '10:24:35',
    level: 'critical',
    levelText: '严重',
    message: '消防通道B2检测到烟雾报警',
    location: 'B座3层',
    icon: Warning
  },
  {
    time: '10:22:15',
    level: 'warning',
    levelText: '警告',
    message: '电梯A3运行异常',
    location: 'A座电梯',
    icon: Bell
  },
  {
    time: '10:20:30',
    level: 'info',
    levelText: '提示',
    message: '门禁系统例行维护完成',
    location: '安防控制室',
    icon: Lock
  },
  {
    time: '10:18:45',
    level: 'warning',
    levelText: '警告',
    message: '摄像头C5离线',
    location: 'C区停车场',
    icon: VideoCamera
  },
  {
    time: '10:15:20',
    level: 'critical',
    levelText: '严重',
    message: '发现未授权人员进入',
    location: '机房区域',
    icon: Warning
  },
  {
    time: '10:12:10',
    level: 'info',
    levelText: '提示',
    message: '系统自动巡检开始',
    location: '全园区',
    icon: Bell
  },
  {
    time: '10:10:05',
    level: 'warning',
    levelText: '警告',
    message: '温度传感器数值异常',
    location: 'D座配电室',
    icon: Warning
  },
  {
    time: '10:08:30',
    level: 'info',
    levelText: '提示',
    message: '备用发电机测试完成',
    location: '动力中心',
    icon: Bell
  }
])

// 计算总页数
const totalPages = computed(() => Math.ceil(alerts.value.length / pageSize))

// 计算当前页显示的告警信息
const currentPageAlerts = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  return alerts.value.slice(start, start + pageSize)
})

// 计算要显示的页码
const displayedPages = computed(() => {
  const pages = []
  for (let i = 1; i <= totalPages.value; i++) {
    pages.push(i)
  }
  return pages
})

// 页码改变处理函数
const handlePageChange = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

// 添加加载状态
const isLoading = ref(true)

// 添加定时器引用
let timeUpdateInterval

onMounted(() => {
  // 模拟加载完成
  setTimeout(() => {
    isLoading.value = false
  }, 1000)

  // 设置定时更新时间
  timeUpdateInterval = setInterval(() => {
    // 更新所有监控画面的时间
    activeMonitors.value = activeMonitors.value.map(camera => ({
      ...camera,
      currentTime: getCurrentTime()
    }))
  }, 1000)
})

// 清理定时器
onUnmounted(() => {
  if (timeUpdateInterval) {
    clearInterval(timeUpdateInterval)
  }
})

// 更多的错误处理
const handleError = (error) => {
  console.error('发生错误:', error)
  // 这里可以添加错误提示或其他处理
}

// 获取当前时间
const getCurrentTime = () => {
  return new Date().toLocaleTimeString()
}

</script>

<style lang="scss" scoped>
.security-container {
  padding: 20px;
  background: #001f3f;
  max-height: 1500px;
  min-height: 100vh;
  height: 100%;
  color: #00f7ff;
  overflow-y: auto;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 247, 255, 0.1);
  }
  
  &::-webkit-scrollbar-thumb {
    background: #00f7ff;
    border-radius: 3px;
    
    &:hover {
      background: #00ff88;
    }
  }
}

.security-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  height: calc(min(1500px, 100vh) - 40px);
  min-height: 800px;
}

.cyber-title {
  color: #00f7ff;
  font-size: 1.2em;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.5);
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 247, 255, 0.3);
}

// 设备状态面板样式
.status-panel {
  background: rgba(32, 40, 72, 0.8);
  border: 1px solid rgba(0, 247, 255, 0.3);
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(800px - 60px);
}

.device-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.stat-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 15px;
  background: rgba(0, 247, 255, 0.05);
  border-radius: 6px;
  gap: 15px;
  
  &:hover {
    background: rgba(0, 247, 255, 0.1);
  }
}

.stat-icon {
  font-size: 24px;
  color: #00f7ff;
}

.stat-info {
  .stat-name {
    color: #00f7ff;
    margin-bottom: 5px;
  }
  
  .stat-value {
    font-size: 1.2em;
    .online {
      color: #00ff88;
    }
  }
}

.stat-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  
  &.normal {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
  }
  
  &.warning {
    background: rgba(255, 198, 0, 0.1);
    color: #ffc600;
  }
}

// 监控面板样式
.monitor-panel {
  background: rgba(32, 40, 72, 0.8);
  border: 1px solid rgba(0, 247, 255, 0.3);
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(800px - 60px);
}

.camera-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  height: calc(100% - 60px);
  max-height: calc(1500px - 120px);
}

.camera-view {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.3);
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  max-height: calc((1500px - 160px) / 2);
}

.camera-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 247, 255, 0.1);
  
  .camera-name {
    color: #00f7ff;
  }
  
  .camera-status {
    &.online {
      color: #00ff88;
    }
    &.warning {
      color: #ffc600;
    }
  }
}

.video-feed {
  height: calc(100% - 40px);
  background: linear-gradient(45deg, #001f3f, #002f5f);
  position: relative;
  
  .scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00f7ff, transparent);
    animation: scan 3s linear infinite;
  }
  
  .camera-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    color: #00f7ff;
    font-size: 0.9em;
    text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
  }
}

// 告警面板样式
.alert-panel {
  background: rgba(32, 40, 72, 0.8);
  border: 1px solid rgba(0, 247, 255, 0.3);
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(800px - 60px);
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .cyber-title {
    margin: 0;
    border: none;
    padding: 0;
  }
}

.alert-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: calc(1500px - 120px);
}

.alert-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 10px;
  max-height: calc(1500px - 200px);
  
  &::-webkit-scrollbar {
    width: 4px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 247, 255, 0.1);
  }
  
  &::-webkit-scrollbar-thumb {
    background: #00f7ff;
    border-radius: 2px;
  }
}

.alert-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 247, 255, 0.05);
  border-radius: 6px;
  
  &.critical {
    border-left: 3px solid #ff3e3e;
    background: rgba(255, 62, 62, 0.05);
    
    .alert-level {
      background: rgba(255, 62, 62, 0.1);
      color: #ff3e3e;
    }
  }
  
  &.warning {
    border-left: 3px solid #ffc600;
    
    .alert-level {
      background: rgba(255, 198, 0, 0.1);
      color: #ffc600;
    }
  }
  
  &.info {
    border-left: 3px solid #00f7ff;
    
    .alert-level {
      background: rgba(0, 247, 255, 0.1);
      color: #00f7ff;
    }
  }
  
  animation: slideIn 0.3s ease-out;
}

.alert-content {
  flex: 1;
  
  .alert-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    .alert-time {
      color: #00f7ff;
    }
    
    .alert-level {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.9em;
    }
  }
  
  .alert-message {
    color: #00f7ff;
    margin-bottom: 5px;
  }
  
  .alert-location {
    font-size: 0.9em;
    color: rgba(0, 247, 255, 0.7);
  }
}

@keyframes scan {
  0% { top: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 添加加载状态样式
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 31, 63, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  border-top-color: #00f7ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  
  &::before, &::after {
    content: '';
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
  }
  
  &::before {
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border-top-color: #00ff88;
    animation: spin 2s linear infinite;
  }
  
  &::after {
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-top-color: #ffc600;
    animation: spin 3s linear infinite;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 添加过渡动画
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// 响应式布局优化
@media (max-width: 1400px) {
  .security-grid {
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
  }
  
  .alert-panel {
    grid-column: span 2;
    height: auto;
    min-height: 400px;
    max-height: 600px;
  }
}

@media (max-width: 768px) {
  .security-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .alert-panel {
    grid-column: span 1;
    max-height: 500px;
  }
  
  .camera-grid {
    grid-template-columns: 1fr;
    max-height: none;
  }
  
  .camera-view {
    max-height: 300px;
  }
  
  .alert-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    
    .cyber-pagination {
      width: 100%;
      justify-content: center;
    }
  }
}

.cyber-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .cyber-btn {
    background: transparent;
    border: 1px solid #00f7ff;
    color: #00f7ff;
    padding: 4px 8px;
    height: 28px;
    min-width: 28px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 247, 255, 0.2),
        transparent
      );
      transition: 0.5s;
    }
    
    &:hover:not(.disabled) {
      background: rgba(0, 247, 255, 0.1);
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
      
      &::before {
        left: 100%;
      }
    }
    
    &.active {
      background: #00f7ff;
      color: #001f3f;
      box-shadow: 0 0 15px rgba(0, 247, 255, 0.5);
    }
    
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      
      &:hover {
        transform: none;
        background: transparent;
      }
    }
  }
}

.page-numbers {
  display: flex;
  gap: 4px;
  
  .cyber-btn {
    margin: 0 2px;
  }
}
</style> 